var maps = {};
var markers = {};

function initialize_map(map) {
    
    var initial_longitude = (arguments[1] !== undefined) ? arguments[1] : '120.61758366806225';
    var initial_latitude = (arguments[2] !== undefined) ? arguments[2] : '16.413640135538014';
    
    var myLatlng = new google.maps.LatLng(initial_latitude, initial_longitude);
    var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    maps[map + '_map'] = new google.maps.Map(document.getElementById(map + '_map'), myOptions);

    markers[map + '_map'] = new google.maps.Marker({
        position: myLatlng,
        map: maps[map + '_map'],
        draggable: true,
        raiseOnDrag: false,
        animation: google.maps.Animation.DROP
    });

    google.maps.event.addListener(
        markers[map + '_map'],
        'drag',
        function() {
            $('#' + map + '_latitude').val(markers[map + '_map'].position.lat());
            $('#' + map + '_longitude').val(markers[map + '_map'].position.lng());
        }
    );
        
    $('#' + map + '_latitude').change(function() {
        var latitude = $(this).val();
        var longitude = $('#' + map + '_longitude').val();
        plot_location(maps[map + '_map'], markers[map + '_map'], latitude, longitude);
    });
    
    $('#' + map + '_longitude').change(function() {
        var latitude = $('#' + map + '_latitude').val();
        var longitude = $(this).val();
        plot_location(maps[map + '_map'], markers[map + '_map'], latitude, longitude);
    });
}

function plot_location(myMap, myMarker, longitude, latitude) {
    myMarker.setPosition(new google.maps.LatLng(longitude, latitude));
    myMap.panTo(new google.maps.LatLng(longitude, latitude));
}